<template>
  <div id="menu_nav">
    <nav>
      <ul>
        <li v-for="(item,index) in List.sub_list" :key="index" 
          @click="toggle(index,item.Id)" :class="{Actions:index== menuActive}">
          <b>{{item.ThemeClassName}}</b>
        </li>
      </ul>
    </nav>
  </div>
</template>
<script>
  import Api from 'public/req_api' 
  import {mapActions, mapState} from 'vuex'
  import {updateArticle_object} from 'public/options'
  export default{
    name:'LeftMenu',
    data(){
      return{
        List:{
          sub_list:[]
        }
      }
    },
    computed:{
      ...mapState(['menuActive','iPage'])
    },methods:{
      ...mapActions(['update_blockID','update_menuActive']),
      toggle(index,id){
        
        this.$store.dispatch('update_menuActive',index)
        this.$store.dispatch('update_blockID',
          updateArticle_object(id,this,1))
      }
    },created(){

      Api.getSection().then((data)=>{
        this.List.sub_list=data
        this.$store.dispatch('update_blockID',
          updateArticle_object(data[0].Id,this,1))
      })
    }
  }

</script>